<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<style>
			body {
				margin: 10px;
				background: #FFFFFF;
			}

			.layui-card-header {
				background: #01AAED;
				color: #fff
			}

			p.title- {
				color: #fff;
				font-size: 16px;
				margin-bottom: 10px
			}

			p.val {

				font-size: 35px;
				color: #fff;
			}

			.kuai {
				height: 60px;
				padding: 20px 20px 20px 100px;
				background-repeat: no-repeat;
				background-size: 80px auto;
				background-position: left center;
			}

			.kuai.dian {
				background-image: url("../../images/dian.png");
			}

			.kuai.dianm {
				background-image: url("../../images/dianm.png");
			}

			.kuai.shui {
				background-image: url("../../images/shui.png");
			}

			.kuai.shuim {
				background-image: url("../../images/device1.png");
			}
		</style>
	</head>

	<body>
		<div class="layui-row">
			<div class="layui-col-md3">
				<div id="test12" class="demo-tree-more"></div>
			</div>
			<div class="layui-col-md9">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-xs4 layui-col-md4">
						<div class="layui-card" style="background-color: #009688;">
							<div class="layui-card-body kuai dian">
								<p class="title-" id="electric">累计耗电</p>
								<p class="val" id="electric-val">1734.00KWH</p>
							</div>
						</div>
					</div>
					<div class="layui-col-xs4 layui-col-md4">
						<div class="layui-card" style="background-color: #01AAED;">
							<div class="layui-card-body kuai shui">
								<p class="title-" id="cur-water">累计水量</p>
								<p class="val" id="water-val">1634m³</p>
							</div>
						</div>
					</div>
					<div class="layui-col-xs3 layui-col-md4">
						<div class="layui-card" style="background-color: #f45;">
							<div class="layui-card-body kuai shuim">
								<p class="title-" id="err-device">异常设备数</p>
								<p class="val" id="err-num">38</p>
							</div>
						</div>
					</div>
				</div>
				
				<div class="layui-row layui-col-space10">
					<div class="layui-col-lg6 layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">设备列表</div>
							<div class="layui-col-xs12">
								<div style="height: 350px">
									<table class="layui-hide" id="test"></table>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-lg6 layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">泵房实况</div>
							<div class="layui-col-xs12">
								<div id="map" style="height: 332px;">
									<img style=" width: 100%; height:100%" src="../../images/test1.png" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-row layui-col-space10">
					<div class="layui-col-lg6 layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">供水情況</div>
							<div class="layui-col-xs12">
								<div style="height: 350px">
									<div id="supply-water" style="height: 350px;">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-lg6 layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">实时压力情况</div>
							<div class="layui-col-xs12">
								<div id="press" style="height: 350px;">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="../../../layui/layui.js"></script>
	<script src="../../libs/echarts/echarts.min.js"></script>
	<script src="../../libs/echarts/echartsTheme.js"></script>
	<script>
		layui.use(['layer', 'element', 'tree', 'util', 'table'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var element = layui.element;
			var tree = layui.tree;
			var util = layui.util;
			var table = layui.table;

			var app = {};
			//模拟数据
			data = [{
				title: '南疆',
				id: 1,
				field: 'name1',
				checked: true,
				spread: true,
				children: [{
						title: '翠屏城小区',
						id: 3,
						field: '',
						spread: true,
						children: [{
							title: '翠屏城1号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城2号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城3号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城4号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城5号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城6号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城7号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '世纪花园小区',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '世纪花园1号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园2号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园3号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园4号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园5号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '奧斯伯恩庄园',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '奧斯伯恩1号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩2号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩3号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩4号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '碧水湾小区',
						id: 20,
						field: '',
						children: [{
							title: '碧水湾1号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾2号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾3号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾4号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '秣陵福源小区',
						id: 20,
						field: '',
						children: [{
							title: '秣陵福源1号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源2号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源3号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源4号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源5号泵房',
							id: 20,
							field: ''
						}]
					}
				]
			}]
			
			//基本演示
			tree.render({
				elem: '#test12',
				data: data,
				showCheckbox: true //是否显示复选框
					,
				id: 'demoId1',
				isJump: true //是否允许点击节点时弹出新窗口跳转
					,
				click: function(obj) {
					var data = obj.data; //获取当前点击的节点数据
					//layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
					
					$("#electric").text("当前耗电") ;
					$("#electric-val").text(parseInt(Math.random() * 1000) + "KWH") ;
					$("#cur-water").text("当前供水量") ;
					$("#water-val").text(parseInt(Math.random() * 1000) +"m³") ;
					$("#err-device").text("当前设备异常数") ;
					$("#err-num").text("0") ;
				}
			});

			//按钮事件
			util.event('lay-demo', {
				getChecked: function(othis) {
					var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

					layer.alert(JSON.stringify(checkedData), {
						shade: 0
					});
					console.log(checkedData);
				},
				setChecked: function() {
					tree.setChecked('demoId1', [12, 16]); //勾选指定节点
				},
				reload: function() {
					//重载实例
					tree.reload('demoId1', {

					});

				}
			});
			
			table.render({
				elem: '#test',
				url: '../../data/errDevice.json',
				cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				page : true,
				cols: [
					[{
							field: 'id',
							title: 'ID'
						}, {
							field: 'deviceCode',
							title: '设备编码'
						}, {
							field: 'deviceName',
							title: '设备名称'
						}, {
							field: 'time',
							title: '运行时长'
						}, {
							field: 'status',
							title: '运行状态',
							templet: function(r) {
							
							
								var state = r.status;
								if (state == "正常") {
							
									return "<span style='color:green'>正常</span>";
								}  else {
									return "<span  style='color:red'>异常</span>";
								}
							
							
							}
							
						}
					]
				]
			});

			
			var myCharts1 = echarts.init(document.getElementById('press'), myEchartsTheme);
			
			option1 = {
				
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['进水口', '出水口']
				},
				toolbox: {
					show: true,
					feature: {
						magicType: {
							show: true,
							type: ['stack', 'tiled']
						},
						saveAsImage: {
							show: true
						}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时',
						'16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时'
					]
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: '进水口',
						type: 'line',
						smooth: true,
						data: [2, 5, 25, 5, 6, 4, 12, 2, 2, 25, 5, 6, 4, 12, 2, 2, 25, 5, 6, 4, 12,
							22, 12, 23, 6
						]
					},
					{
						name: '出水口',
						type: 'line',
						smooth: true,
						data: [25, 26, 1, 25, 3, 6, 18, 25, 26, 5, 25, 3, 6, 18, 2.5, 26, 5, 25, 3, 6,
							18, 1, 12, 26, 3
						]
					}
				]
			};
			
			myCharts1.setOption(option1);
			
			// 渲染销售额图表
			var myCharts3 = echarts.init(document.getElementById('supply-water'), myEchartsTheme);
			var option3 = {
				title: {
					text: '供水趋势',
					textStyle: {
						color: '#000',
						fontSize: 14
					}
				},
				tooltip: {},
				grid: {
					left: '0',
					right: '0',
					bottom: '0',
					containLabel: true
				},
				xAxis: {
					data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时',
						'16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
				},
				yAxis: {},
				series: [{
					type: 'bar',
					data: [40, 80, 105, 30, 200, 450, 520, 546, 988, 1002, 806, 506, 726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 206, 506],
					barMaxWidth: 45
				}]
			};
			myCharts3.setOption(option3);

			// 渲染访问量图表
			var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme);
			var option4 = {
				title: {
					text: '耗能趋势',
					textStyle: {
						color: '#000',
						fontSize: 14
					}
				},
				tooltip: {},
				grid: {
					left: '0',
					right: '0',
					bottom: '0',
					containLabel: true
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				},
				yAxis: {},
				series: [{
					type: 'bar',
					data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302],
					barMaxWidth: 45
				}]
			};
			myCharts4.setOption(option4);

			// 切换选项卡重新渲染
			element.on('tab(tabZZT)', function(data) {
				if (data.index == 0) {
					myCharts3.resize();
				} else {
					myCharts4.resize();
				}
			});

			// 窗口大小改变事件
			window.onresize = function() {
				myCharts.resize();
				myCharts2.resize();
				myCharts3.resize();
				myCharts4.resize();
			};

		});
	</script>
</html>
